<template>
  <component
    :is="componentTag"
    v-bind="linkProps"
    :class="linkClass"
    @click="handleClick"
  >
    <slot />
    <AxiomIcon v-if="isExternalLink" name="fa-external-link-alt" class="axiom-link__external-icon" />
  </component>
</template>

<script>
import { computed } from 'vue'
import { RouterLink } from 'vue-router'
import AxiomIcon from './AxiomIcon.vue';
// import { GlobalUtilsMixin } from '@/utils/globalUtils'

export default {
  name: 'AxiomLink',
  components: {
    AxiomIcon
  },
  // mixins: [GlobalUtilsMixin],
  props: {
    href: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'default',
      validator: (value) => ['default', 'primary', 'secondary', 'danger', 'success'].includes(value)
    },
    size: {
      type: String,
      default: 'medium',
      validator: (value) => ['small', 'medium', 'large'].includes(value)
    },
    disabled: {
      type: Boolean,
      default: false
    },
    button: {
      type: Boolean,
      default: false
    }
  },
  emits: ['click'],
  computed: {
    isExternalLink() {
      return /^(https?:|mailto:|tel:)/.test(this.href)
    },
    componentTag() {
      return this.isExternalLink ? 'a' : RouterLink
    },
    linkProps() {
      if (this.isExternalLink) {
        return {
          href: this.href,
          target: '_blank',
          rel: 'noopener noreferrer'
        }
      }
      return {
        to: this.href
      }
    },
    linkClass() {
      const classes = ['axiom-link']
      
      classes.push(`axiom-link--${this.type}`)
      classes.push(`axiom-link--${this.size}`)
      
      if (this.disabled) classes.push('axiom-link--disabled')
      if (this.button) classes.push('axiom-link--button')
      if (this.isExternalLink) classes.push('axiom-link--external')
      
      return classes.join(' ')
    }
  },
  methods: {
    handleClick(event) {
      if (this.disabled) {
        // this.$logger.debug('链接被禁用，阻止点击', { href: this.href, disabled: this.disabled });
        event.preventDefault()
        return
      }
      // this.$logger.debug('链接被点击', { href: this.href, type: this.type, external: this.isExternalLink });
      this.$emit('click', event)
    }
  },
  created() {
    // this.$logger.debug('AxiomLink 组件初始化', { href: this.href, type: this.type, size: this.size, disabled: this.disabled });
  }
}
</script>

<style lang="scss">
@use '../../styles/components/common/axiom-link';
</style> 